<template>
  <div class="ForAdoption">
    <div class="from">
      <van-uploader v-model="fileList" accept="image/jpeg" max-count="4" multiple />
      <div class="Pet-information">
        <h3>宠物信息</h3>
        <div class="Pet-name">
          <div>
            <label for>
              昵称
              <span>*</span>
            </label>
            <input type="text" placeholder="请输入昵称" />
          </div>
          <div>
            <label for>
              年龄
              <span>*</span>
            </label>
            <input type="text" placeholder="请输入年龄" />
          </div>
        </div>
        <div class="Pet-category">
          <label for>
            类别
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petMessage" :key="item.petClassifyId">
            <!-- <button v-for=""></button> -->
            <button
              v-for="info in item.petClassify"
              :key="info.id"
              @click="category=info.petClassifyInfo"
              :class="category==info.petClassifyInfo?'hover':'button1'"
            >{{ info.petClassifyInfo }}</button>
          </div>
        </div>
        <div class="Pet-category">
          <label for>
            性别
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petMessage" :key="item.petClassifyId">
            <button
              v-for="info in item.petSex"
              :key="info.id"
              @click="gender=info.petSexInfo"
              :class="gender==info.petSexInfo?'hover':'button1'"
            >{{info.petSexInfo}}</button>
          </div>
        </div>
      </div>
      <div class="Pet-status-quo">
        <h3>宠物现状</h3>
        <div class="status-details">
          <label>
            疫苗
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petNow" :key="item.Id">
            <button
              v-for="info in item.petImmune"
              :key="info.id"
              @click="yimiao=info.petImmuneInfo"
              :class="yimiao==info.petImmuneInfo?'hover':'button1'"
            >{{info.petImmuneInfo}}</button>
          </div>
        </div>
        <div class="status-details">
          <label for>
            驱虫
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petNow" :key="item.Id">
            <button
              v-for="info in item.petDoworming"
              :key="info.id"
              @click="quchong=info.petDowormingInfo"
              :class="quchong==info.petDowormingInfo?'hover':'button1'"
            >{{info.petDowormingInfo}}</button>
          </div>
        </div>
        <div class="status-details">
          <label for>
            绝育
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petNow" :key="item.Id">
            <button
              v-for="info in item.petSterilization"
              :key="info.id"
              @click="jueyu=info.petSterilizationInfo"
              :class="jueyu==info.petSterilizationInfo?'hover':'button1'"
            >{{info.petSterilizationInfo}}</button>
          </div>
        </div>
        <div class="status-details">
          <label for>
            来源
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petNow" :key="item.Id">
            <button
              v-for="info in item.petSource"
              :key="info.id"
              @click="laiyuan=info.petSourceInfo"
              :class="laiyuan==info.petSourceInfo?'hover':'button1'"
            >{{info.petSourceInfo}}</button>
          </div>
        </div>
        <div class="status-details">
          <label for>
            体型
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petNow" :key="item.Id">
            <button
              v-for="info in item.petShape"
              :key="info.id"
              @click="tixing=info.petShapeInfo"
              :class="tixing==info.petShapeInfo?'hover':'button1'"
            >{{info.petShapeInfo}}</button>
          </div>
        </div>
        <div class="status-details">
          <label for>
            毛发
            <span>*</span>
          </label>
          <div v-for="item in ForAdoptiondata.petNow" :key="item.Id">
            <button
              v-for="info in item.petHair"
              :key="info.id"
              @click="maofa=info.petHairInfo"
              :class="maofa==info.petHairInfo?'hover':'button1'"
            >{{info.petHairInfo}}</button>
          </div>
        </div>
      </div>
      <div class="Pet-characteristics">
        <div class="characteristics-name">
          <h3>宠物特点</h3>
          <span>(最多选择3个，选填)</span>
        </div>
        <div class="characteristics-details">
          <button
            v-for="item in ForAdoptiondata.petCharacter"
            :key="item.petClassifyId"
            @click="Addfeatures(item.petCharacter)"
            :class="show(item.petCharacter)?'active':'button'"
          >{{item.petCharacter}}</button>
        </div>
      </div>
      <button
        class="next-step"
        @click="$router.push({path:'/forAdoption2',params:'ForAdoptiondata'})"
      >下一步</button>
    </div>
  </div>
</template>
<script src="./ForAdoption.js">
</script>
<style lang="scss">
@import "./ForAdoption.scss";
</style>

